<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<!-- 元素是特殊的节点 -->
<style>
.tablebox{
width: 600px;
margin: 0 auto;
margin-top: 50px;
text-align: center;

}

</style>
</head>
<body>
<table class="tablebox" border="1px">
<th style="text-align: center" colspan="5">
<input type="button" value="添加"  onclick="append()" />
<input type="button" value="删除" onclick="remove()"/>
</th>
<tr>
<th><input type="checkbox" id="checkAll">全选</th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>

<tr>
<td><input type="checkbox" class="checkOne"></td>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>40</td>
</tr>
<tr>
<td><input type="checkbox" class="checkOne"></td>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>34</td>
</tr>
<tr>
<td><input type="checkbox" class="checkOne"></td>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td><input type="checkbox" class="checkOne"></td>
<td>4</td>
<td>赵六</td>
<td>男</td>
<td>29</td>
</tr>

</table>
<script>
var checkBoxs=document.querySelectorAll('input.checkOne');
document.onclick=function(e){
if(e.target.id=="checkAll"){

if(e.target.checked){
for(let checkBox of checkBoxs){
checkBox.checked=true;
}
}else{
for(let checkBox of checkBoxs){
checkBox.checked=false;
}
}


}

}

for(let checkBox of checkBoxs){
checkBox.onclick=function(){


var nametd=this.parentElement.
nextElementSibling.nextElementSibling;//一定加element

alert(nametd.innerHTML);

}

}
function append(){
	
	var tdbody=document.querySelector('table').firstElementChild;//字节点==tbody
	var tr=document.createElement('tr');
	//获取字
	var lasttr=tdbody.lastElementChild;
	var id=Number(lasttr.childNodes[3].innerHTML)+1;
	// var id=lasttr.childElementCount;
	console.log(id)
	
	
	tr.innerHTML=`
	<td><input type="checkbox" class="checkOne"></td>
	<td>`+id+`</td>
	<td>赵六</td>
	<td>男</td>
	<td>29</td>
	`;
	
	// console.log(tr);
	// tdbody.insertBefore(tr,tdbody.childNodes[3]);//全是张三 赵六
	// tdbody.appendChild(tr);
	//编号赋真 +1
	tdbody.appendChild(tr);

}




function remove(){
var checkedBoxs=document.
querySelectorAll('input.checkOne:checked');

for(let checkedBox of checkedBoxs){
var delEle=checkedBox.parentElement.parentElement;
var targetEle=delEle.parentElement;
targetEle.removeChild(delEle);

}



}






</script>
</body>
</html>
